<template>
  <el-skeleton :rows="13" animated :loading="loading">
    <div class="per-container">
      <el-card class="left">
        <el-upload
          class="avatar-uploader"
          action="/api/fmms/systemController/uploadAvatar"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <div class="name">{{ userInfo.username }}</div>
        <div class="motto">{{ userInfo.motto }}</div>
        <div class="tags">
          <p class="lable">
            <el-icon><User /></el-icon>
            <span class="content">{{ userInfo.briefIntroduction }}</span>
          </p>
          <p class="lable">
            <el-icon><Cpu /></el-icon>
            <span class="content">{{ userInfo.skill }}</span>
          </p>
          <p class="lable">
            <el-icon><School /></el-icon>
            <span class="content">{{ userInfo.school }}</span>
          </p>
          <p class="lable">
            <el-icon><MapLocation /></el-icon>
            <span class="content">{{ userInfo.address }}</span>
          </p>
        </div>
        <div class="self-introduce">
          <p style="font-size: 14px; padding-left: 10px">标签</p>
          <div class="tags">
            <el-tag class="tag">努力的搬砖</el-tag>
            <el-tag class="tag" type="success">生命不息 代码不止</el-tag>
            <el-tag class="tag" type="info">努力的活着</el-tag>
            <el-tag class="tag" type="warning">追求卓越 实现自我</el-tag>
            <el-tag class="tag" type="danger">为中华统一付出微薄贡献</el-tag>
          </div>
        </div>
      </el-card>
      <el-card class="right">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="本人信息" name="first"></el-tab-pane>
          <el-tab-pane label="密码修改" name="two"></el-tab-pane>
        </el-tabs>
        <account-security
          v-show="activeName === 'two'"
          @initUserInfo="initUserInfo"
        />
        <person-info
          v-show="activeName === 'first'"
          :currentUserInfo="currentUserInfo"
          @initUserInfo="initUserInfo"
        />
      </el-card>
    </div>
  </el-skeleton>
</template>

<script setup>
import { ref } from 'vue'
import AccountSecurity from './components/accountSecurity.vue'
import PersonInfo from './components/personInfo.vue'
import { handleTokenExpire } from '@/utils/handleTokenExpire.js'
import {
  getCurrentUserInfo,
  updateCurrentUserInfo
} from '@/api/personInfoManager.js'
import { ElMessage } from 'element-plus'
import bus from '@/mitt'

const imageUrl = ref('')

const loading = ref(true)
const initUserInfo = async () => {
  try {
    const res = await getCurrentUserInfo()
    loading.value = false
    const {
      username,
      gender,
      email,
      telephone,
      address,
      portraitPath,
      briefIntroduction,
      motto,
      skill,
      school
    } = res.data
    currentUserInfo.value = {
      username,
      gender,
      email,
      telephone,
      address,
      briefIntroduction,
      motto,
      skill,
      school
    }
    userInfo.value.username = username
    userInfo.value.address = address
    userInfo.value.briefIntroduction = briefIntroduction
    userInfo.value.skill = skill
    userInfo.value.motto = motto
    userInfo.value.school = school
    imageUrl.value = portraitPath
  } catch (error) {
    handleTokenExpire(error)
    // 获取信息失败可能发生token 失效要么单独处理要门在相应拦截器统一处理
  }
}

initUserInfo()

const handleAvatarSuccess = async (res, uploadFile) => {
  // console.log(res, uploadFile)
  imageUrl.value = res.data
  if (res.code === 200) {
    try {
      await updateCurrentUserInfo({ portraitPath: imageUrl.value })
      // 触发头像组件的初始化事件
      bus.emit('initAvatar')
      ElMessage({
        type: 'success',
        duration: 1500,
        message: '图片更新成功'
      })
    } catch (error) {
      ElMessage({
        type: 'error',
        duration: 1500,
        message: error
      })
    }
  } else {
    ElMessage({
      type: 'error',
      duration: 1500,
      message: '图片上传失败'
    })
  }
}

const beforeAvatarUpload = (mutipartFile) => {
  const isJPG = mutipartFile.type === 'image/jpeg'
  const isLt2M = mutipartFile.size / 1024 / 1024 < 2
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

const userInfo = ref({
  username: '',
  address: '',
  briefIntroduction: '',
  motto: '',
  skill: '',
  school: ''
})

const activeName = ref('first')

const currentUserInfo = ref({})
</script>

<style scoped>
:deep(.avatar-uploader .el-upload) {
  left: calc((100% - 120px) / 2);
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
:deep(.avatar-uploader .el-upload:hover) {
  border-color: #409eff;
}
:deep(.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 178px;
  text-align: center;
}
:deep(.avatar) {
  width: 130px;
  height: 130px;
  display: block;
}
</style>
<style lang="scss" scoped>
@media screen and(max-width:995px) {
  .per-container[data-v-01b640a1] {
    flex-direction: column;
    .left {
      margin-right: 0px;
      width: 100%;
      margin-bottom: 15px;
    }
  }
}
:deep(.avatar-uploader .el-upload) {
  border-radius: 50%;
}

.right::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #f5f7fa;
}
// 定义滚动条轨道（凹槽）样式
.right::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #fff;
  border-radius: 10px;
  background: white;
}

// 定义滑块 样式  height:滚动条滑块长度
.right:hover::-webkit-scrollbar-thumb {
  border-radius: 30px;
  width: 66px;
  box-shadow: inset 0 0 5px rgba(238, 237, 237, 0.2);
  background: #c0c4cc;
}

.per-container {
  display: flex;
  flex-direction: row;
  :deep(.el-card) {
    overflow: auto;
  }
  .left {
    width: 380px;
    height: 560px;
    margin-right: 20px;
    min-width: 320px;
  }
  .right {
    height: 560px;
    min-width: 300px;
    flex: 1;
  }
  .name {
    margin: 10px 0px;
    font-size: 20px;
    font-weight: 500;
    // color: #303133;
    line-height: 20px;
    text-align: center;
  }
  .motto {
    text-align: center;
    font-size: 14px;
    line-height: 1.5715;
  }
  .lable {
    padding: 0px 20px;
    margin: 15px 10px;
    font-size: 14px;
    .content {
      margin-left: 10px;
    }
  }
  .self-introduce {
    height: 160px;
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    padding: 10px;
    margin: 0px 10px;
    &:hover {
      cursor: pointer;
      border: 1px dashed #409eff;
    }
    .tags {
      padding: 10px 15px;
      text-align: center;
      .tag {
        margin: 6px;
      }
    }
  }
}
</style>
